<template>
  <div class="container">
    <div class="content">
      <!-- 轮播图 -->
      <Carousel></Carousel>
      <!-- 搜索框 -->
      <Search></Search>

      <el-row style="margin-top: 60px;">
        <!-- 左侧导航 -->
        <el-col :span="20">
          <div class="grid-content ep-bg-purple" />
          <Navigation @getLevel="getLevel" @getRegion="getRegion"></Navigation>
          <!-- 医院卡片 -->
          <!-- 通过props传递给子组件 -->
          <div v-if="hospitallArr.length === 0" v-loading="loading" element-loading-text="加载中..."
            element-loading-background="rgba(122, 122, 122, 0.8)"></div>
          <Card :hospitalInfo="hospitallArr" v-if="hospitallArr.length > 0"></Card>
          <el-empty v-else description="没有医院呢~" />
        </el-col>
        <!-- 右侧公告 -->
        <el-col :span="4">
          <div class="grid-content ep-bg-purple-light" />
          <Notice></Notice>
        </el-col>
      </el-row>
      <!-- 底部分页 -->
      <el-pagination style="margin: 10px 0 10px 10px;" v-model:current-page="pageNo" v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]" :background="true" layout=" prev, pager, next" :total="total"
        @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入其他组件
import Carousel from '../home/Carousel.vue';
import Search from '../home/Search.vue'
import Navigation from '../home/Navigation.vue';
import Notice from '../home/Notice.vue';
import Card from '../home/Card.vue'
// 调用一些方法
import { onMounted, ref } from 'vue';
import { hospital_request } from '../../api/home/index';
import { Content } from '@/api/home/type';


// 设置数据
let pageNo = ref<number>(1) //页码
let pageSize = ref<number>(10) // 一页展示的数据
let total = ref<number>(0)
let hospitallArr = ref<Content>([]) // 请求到的医院数组
let hosptype = ref<string>('')//医院类型
let districtCode = ref<string>('')// 医院地区
let loading = ref<boolean>()//显示；加载中
// 下面是使用方法
onMounted(() => {
  // 页面一刷新就调用请求
  getHospitalInfo()
})
// 获取医院数据的方法
const getHospitalInfo = async () => {
  loading.value = true
  let result: any = await hospital_request(pageNo.value, pageSize.value, hosptype.value, districtCode.value)
  // 调用成功!
  if (result.code === 200) {
    // 拿到医院数据
    hospitallArr.value = result.data.content;
    total.value = result.data.totalElements
    loading.value = false
    return true
  }
}
// 改变了页码就刷新页面
const handleCurrentChange = () => {
  getHospitalInfo()
}
// 拿到子组件的等级页面筛选值
const getLevel = (level: string) => {
  hosptype.value = level
  getHospitalInfo() // 重新刷新页面
}
// 拿到子组件地区的筛选值
const getRegion = (region: string) => {
  districtCode.value = region
  getHospitalInfo() // 重新刷新页面
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;

  .content {
    width: 1200px;
  }
}
</style>